<%@page contentType="text/html; charset=UTF-8" %>
<%@include file="/WEB-INF/jsp/init.jsp"%>

<!-- 创建线索的模态窗口 -->
<div class="modal fade" id="createClueModal" role="dialog">
	<div class="modal-dialog" role="document" style="width: 80%;">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title">创建线索</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form">
					<div class="form-group">
						<label for="create-clueOwner" class="col-sm-2 control-label">
							所有者<span style="color:red;">*</span>
						</label>
						<div class="col-sm-4">
							<select owner class="form-control" id="create-clueOwner">
							  <option></option>
							</select>
						</div>
						<label for="create-company" class="col-sm-2 control-label">
							公司<span style="color:red;">*</span>
						</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="create-company">
						</div>
					</div>

					<div class="form-group">
						<label for="create-call" class="col-sm-2 control-label">称呼&nbsp;</label>
						<div class="col-sm-4">
							<select options="appellation" class="form-control" id="create-call">
							  <option></option>
							</select>
						</div>
						<label for="create-surname" class="col-sm-2 control-label">
							姓名<span style="color:red;">*</span>
						</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="create-surname">
						</div>
					</div>

					<div class="form-group">
						<label for="create-job" class="col-sm-2 control-label">职位&nbsp;</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="create-job">
						</div>
						<label for="create-email" class="col-sm-2 control-label">邮箱&nbsp;</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="create-email">
						</div>
					</div>

					<div class="form-group">
						<label for="create-phone" class="col-sm-2 control-label">公司座机&nbsp;</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="create-phone">
						</div>
						<label for="create-website" class="col-sm-2 control-label">公司网站&nbsp;</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="create-website">
						</div>
					</div>

					<div class="form-group">
						<label for="create-mphone" class="col-sm-2 control-label">手机&nbsp;</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="create-mphone">
						</div>
						<label for="create-source" class="col-sm-2 control-label">线索来源&nbsp;</label>
						<div class="col-sm-4">
							<select options="source" class="form-control" id="create-source">
								<option></option>
							</select>
						</div>
					</div>

					<div class="form-group">
						<label for="create-status" class="col-sm-2 control-label">线索状态&nbsp;</label>
						<div class="col-sm-4">
							<select options="clueState" class="form-control" id="create-status">
								<option></option>
							</select>
						</div>
						<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间&nbsp;</label>
						<div class="col-sm-4">
							<input datetime type="text" class="form-control" id="create-nextContactTime">
						</div>
					</div>

					<div class="form-group">
						<label for="create-describe" class="col-sm-2 control-label">线索描述&nbsp;</label>
						<div class="col-sm-10">
							<textarea class="form-control" rows="3" id="create-describe"></textarea>
						</div>
					</div>

					<div class="form-group">
						<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要&nbsp;</label>
						<div class="col-sm-10">
							<textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
						</div>
					</div>

					<div class="form-group">
						<label for="create-address" class="col-sm-2 control-label">详细地址&nbsp;</label>
						<div class="col-sm-10">
							<textarea class="form-control" rows="3" id="create-address"></textarea>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary" data-dismiss="modal">保存</button>
			</div>
		</div>
	</div>
</div>

<!-- 修改线索的模态窗口 -->
<div class="modal fade" id="editClueModal" role="dialog">
	<div class="modal-dialog" role="document" style="width: 80%;">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title">修改线索</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form">
					<div class="form-group">
						<label for="edit-clueOwner" class="col-sm-2 control-label">
							所有者<span style="color:red;">*</span>
						</label>
						<div class="col-sm-4">
							<select owner class="form-control" id="edit-clueOwner">
								<option></option>
							</select>
						</div>
						<label for="edit-company" class="col-sm-2 control-label">
							公司<span style="color:red;">*</span>
						</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="edit-company">
						</div>
					</div>

					<div class="form-group">
						<label for="edit-call" class="col-sm-2 control-label">称呼&nbsp;</label>
						<div class="col-sm-4">
							<select options="appellation" class="form-control" id="edit-call">
								<option></option>
							</select>
						</div>
						<label for="edit-surname" class="col-sm-2 control-label">
							姓名<span style="color:red;">*</span>
						</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="edit-surname">
						</div>
					</div>

					<div class="form-group">
						<label for="edit-job" class="col-sm-2 control-label">职位&nbsp;</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="edit-job">
						</div>
						<label for="edit-email" class="col-sm-2 control-label">邮箱&nbsp;</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="edit-email">
						</div>
					</div>

					<div class="form-group">
						<label for="edit-phone" class="col-sm-2 control-label">公司座机&nbsp;</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="edit-phone">
						</div>
						<label for="edit-website" class="col-sm-2 control-label">公司网站&nbsp;</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="edit-website">
						</div>
					</div>

					<div class="form-group">
						<label for="edit-mphone" class="col-sm-2 control-label">手机&nbsp;</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="edit-mphone">
						</div>
						<label for="edit-source" class="col-sm-2 control-label">线索来源&nbsp;</label>
						<div class="col-sm-4">
							<select options="source" class="form-control" id="edit-source">
								<option></option>
							</select>
						</div>
					</div>

					<div class="form-group">
						<label for="edit-status" class="col-sm-2 control-label">线索状态&nbsp;</label>
						<div class="col-sm-4">
							<select options="clueState" class="form-control" id="edit-status">
								<option></option>
							</select>
						</div>
						<label for="edit-nextContactTime" class="col-sm-2 control-label">下次联系时间&nbsp;</label>
						<div class="col-sm-4">
							<input datetime type="text" class="form-control" id="edit-nextContactTime">
						</div>
					</div>

					<div class="form-group">
						<label for="edit-describe" class="col-sm-2 control-label">线索描述&nbsp;</label>
						<div class="col-sm-10">
							<textarea class="form-control" rows="3" id="edit-describe"></textarea>
						</div>
					</div>

					<div class="form-group">
						<label for="edit-contactSummary" class="col-sm-2 control-label">联系纪要&nbsp;</label>
						<div class="col-sm-10">
							<textarea class="form-control" rows="3" id="edit-contactSummary"></textarea>
						</div>
					</div>

					<div class="form-group">
						<label for="edit-address" class="col-sm-2 control-label">详细地址&nbsp;</label>
						<div class="col-sm-10">
							<textarea class="form-control" rows="3" id="edit-address"></textarea>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary" data-dismiss="modal">保存</button>
			</div>
		</div>
	</div>
</div>

<!-- 导入线索的模态窗口 -->
<%@include file="/WEB-INF/jsp/inc/dialog/importExcel.jsp"%>

<div class="page-header">
	<h3>线索列表</h3>
</div>

<div class="btn-toolbar" role="toolbar" style="margin-left: 0;margin-top:-10px;">
	<form id="searchForm" action="/clue/getList" class="form-inline" role="form">
		<div class="input-group searchItem">
			<div class="input-group-addon">名称</div>
			<input name="fullName" class="form-control" type="text">
		</div>

		<div class="input-group searchItem">
			<div class="input-group-addon">公司</div>
			<input name="company" class="form-control" type="text">
		</div>

		<div class="input-group searchItem">
			<div class="input-group-addon">公司座机</div>
			<input name="phone" class="form-control" type="text">
		</div>

		<div class="input-group searchItem">
			<div class="input-group-addon">线索来源</div>
			<select name="source" options="source" class="form-control">
				<option></option>
			</select>
		</div>


		<div class="input-group searchItem">
			<div class="input-group-addon">所有者</div>
			<input name="owner" class="form-control" type="text">
		</div>

		<div class="input-group searchItem">
			<div class="input-group-addon">手机</div>
			<input name="mphone" class="form-control" type="text">
		</div>

		<div class="input-group searchItem">
			<div class="input-group-addon">线索状态</div>
			<select name="state" options="clueState" class="form-control">
				<option></option>
			</select>
		</div>

		<button type="submit" class="btn btn-default search">查询</button>
	</form>
</div>

<div class="btn-toolbar" role="toolbar" style="height: 50px;margin-top:20px;">
	<div class="btn-group">
		<button class="btn btn-primary" data-toggle="modal" data-target="#createClueModal"><span class="glyphicon glyphicon-plus"></span> 创建</button>
		<button class="btn btn-default" data-toggle="modal" data-target="#editClueModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
		<button class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
	</div>
	<div class="btn-group">
		<button class="btn btn-default" data-toggle="modal" data-target="#importModal"><span class="glyphicon glyphicon-import"></span> 导入</button>
		<button class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 导出</button>
	</div>
</div>

<div>
	<table class="table table-hover table-striped">
		<thead>
		<tr style="background-color:#d9edf7">
			<th><input id="selectAll" type="checkbox" /></th>
			<th>名称</th>
			<th>公司</th>
			<th>公司座机</th>
			<th>手机</th>
			<th>线索来源</th>
			<th>所有者</th>
			<th>线索状态</th>
		</tr>
		</thead>
		<tbody id="dataBody"></tbody>
	</table>
</div>

<script>
	jQuery(function ($) {
		$("#searchForm").ajaxForm(function (data) {
			let html = "";
			for (let clue of data) {
				html += `<tr>
							<td><input name="id" value='${"${clue.id}"}' type="checkbox" /></td>
							<td><a href="javascript:;" url="/clue/detail.html?id=${"${clue.id}"}">${"${clue.fullName}"}</a></td>
							<td>${"${clue.company}"}</td>
							<td>${"${clue.phone}"}</td>
							<td>${"${clue.mphone}"}</td>
							<td>${"${clue.source}"}</td>
							<td>${"${clue.owner}"}</td>
							<td>${"${clue.state}"}</td>
						</tr>`
			}
			$("#dataBody").html(html);
		});

		// 首次加载
		$("#searchForm").submit();
	});
</script>